import React, { Component } from 'react';
import './style.scss'
// 引入包 可以对props进行类型检查
import PropTypes from 'prop-types';
class Index extends Component {
  // 方式二： 默认props
  static defaultProps = {
    title: '默认标题',
    okValue: '确认',
    noValue: '取消',
  }
  handleClick() {
    const { closeModal, okClick } = this.props
    closeModal()
    okClick && okClick()
  }
  render() {
    // children 是父组件调用组件的时候， 在开始标签和结束标签之间所写的内容 会传递给子组件的this.props.children
    // 类似与 Vue 默认插槽
    const { visible, closeModal, title, okValue, noValue, children } = this.props
    return (
      <div className="modal" style={{ display: visible ? 'block' : 'none' }}>
        <div className="modal-box">
          <div className="header">
            <h2>{title}</h2>
            <b onClick={closeModal}>X</b>
          </div>
          <div className="content">
            {
              children
            }
          </div>
          <div className="footer">
            <button onClick={() => this.handleClick()}>{okValue}</button>
            <button onClick={closeModal}>{noValue}</button>
          </div>
        </div>
      </div>
    );
  }
}

// 检查props
Index.propTypes = {
  title: PropTypes.string
}
// 方式一： 默认props
// Index.defaultProps = {
//   title: '默认标题',
//   okValue: '确认',
//   noValue: '取消',
// }

export default Index;
